<template>
  <div style="margin-top:30px;">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="合同编号" prop="serialNum" style="margin-right:15px">
              <el-input v-model="form.serialNum" placeholder="请输入合同编号"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="签订时间" prop="signTime" style="margin-right:15px">
              <el-date-picker
                :clearable="false"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="form.signTime"
                type="date"
                placeholder="请输入签订时间"
              ></el-date-picker>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <!--<el-form-item label="附件" prop="fileUrl" style="margin-right:15px">
              <el-input v-model="form.fileUrl" placeholder="请输入附件地址"/>
            </el-form-item>-->
            <el-form-item label="附件" prop="fileUrl" style="margin-right:15px">
              <el-upload
                class="upload-demo"
                accept=".pdf,.PDF,.doc,.docx,.jpg,.jpeg,.bmp,.png"
                :multiple="true"
                :on-success="uploadSuccess"
                :on-remove="fileRemove"
                :action="fileUploadUrl"
                :file-list="fileList"
                :headers="getAuthorization()"
                >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传pdf/doc/docx/jpg/jpeg/bmp/png文件</div>
              </el-upload>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="funcCancel">取 消</el-button>
      <el-button type="primary" @click="funcSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
  import request from '@/utils/request'

  export default {
    name: 'shipmentContractEdit',
    data() {
      return {
        fileUploadUrl: this.BASE_API_URL + "ntocc-tps-api/fileUpload",
        fileList: [],
        emptyForm: {},
        form: {
          code: '',
          serialNum: '',
          signTime: '',
          fileUrl: ''
        },
        rules: {
          serialNum: [
            { required: true, message: '请输入合同编号', trigger: 'blur' },
            { min: 1, max: 100, message: '长度在 1 到 50 个字符', trigger: 'blur' }
          ],
          signTime: [
            { required: true, message: '请选择签订时间', trigger: 'blur' },
          ]
        }
      }
    },
    created() {
      //保存空表单对象
      this.emptyForm = JSON.parse(JSON.stringify(this.form))
    },
    methods: {
      // 获取页面信息
      getInfo(code) {
        //查询到数据之前先展示空表单
        this.form = JSON.parse(JSON.stringify(this.emptyForm))
        this.fileList = [];
        request({ url: `/ntocc-basic-api/shipmentContract/${code}`, method: 'get' }).then(response => {
          this.form = response.data;
          if (this.form.fileUrl) {
            this.fileList = JSON.parse(this.form.fileUrl);
          }
        })
      },
      // 提交
      funcSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            const rLoading = this.openLoading();
            const data = this.form;
            const files = [];
            if (this.fileList.length > 0) {
              for (let i in this.fileList) {
                const file = this.fileList[i];
                if (file.url) {
                  files.push(file);
                } else if (file.response && file.response.data) {
                  files.push({name: file.name, url: file.response.data});
                }
              }
            }
            data.fileUrl = JSON.stringify(files);
            request({ url: '/ntocc-basic-api/shipmentContract', method: 'put', params: data }).then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: 'success' })
              this.$emit('fatherEditMethod')
            }).then(() => this.$refs['form'].resetFields())
          } else {
            return false
          }
        })
      },
      //文件上传成功回调方法
      uploadSuccess(response, file, fileList) {
        if (response.status === 0) {
          this.fileList.push(file);
        } else {
          for (let i in fileList) {
            if (fileList[i].uid == file.uid) {
              fileList.splice(i, 1);
            }
          }
          this.$message({message: response.msg, type: 'error'});
        }
      },
      //文件移除回调方法
      fileRemove(file, fileList) {
        this.fileList = fileList;
      },
      // 取消
      funcCancel() {
        this.$emit('fatherCancelMethod', 'edit')
      }

    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 175px;
    float: right;
  }
</style>
